<template>
    <a-modal
            title="新增"
            :visible="visible"
            width="1200px"
            @ok="handleOk"
            :maskClosable="false"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
    >
        <a-form-model ref="form" :model="form" :rules="rules">
            <a-card title="基本需求">
                <a-descriptions bordered :column="2">
                    <a-descriptions-item label="需求标题">
                        <a-form-model-item
                                prop="demandTitle"
                                :rules="{
                                required: true,
                                message: '请输入需求标题',
                                trigger: 'change',
                            }">
                            <a-input 
                            v-model="form.demandTitle"
                            :placeholder="'请输入需求标题'">
                            </a-input>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item label="提出人名称">
                        <a-form-model-item
                                prop="proposerName"
                                :rules="{
                                required: true,
                                message: '请输入提出人名称',
                                trigger: 'change',
                            }">
                            <a-input 
                            v-model="form.proposerName"
                            :placeholder="'请输入提出人名称'"
                            disabled>
                            </a-input>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="提出人类型">
                        <a-form-model-item
                                prop="proposerType"
                                :rules="{
                                required: true,
                                message: '请输入提出人类型',
                                trigger: 'change',
                            }">
                            <a-select 
                                v-model="form.proposerType"
                                :placeholder="'请输入提出人类型'"
                                @change="onChange">
                                <a-select-option :value="item.codeMasterValue" :key="index" v-for="(item,index) in $store.getters.dictionary['SERVICE_DOMAIN_DEMAND_PROPOSER_TYPE']">
                                    {{item.codeMasterName}}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="提出人对应企业">
                        <a-form-model-item
                                prop="companyName"
                                :rules="{
                                required: form.proposerType != 'SD111111',
                                message: '请输入提出人对应企业',
                                trigger: 'change',
                            }">
                            <a-input 
                            v-model="form.companyName"
                            :placeholder="'请输入提出人对应企业'"
                            :disabled="form.proposerType == 'SD111111'">
                            </a-input>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="需求描述">
                        <a-form-model-item
                                prop="demandDescribe"
                                :rules="{
                                required: true,
                                message: '请输入需求描述',
                                trigger: 'change',
                            }">
                            <a-textarea 
                            v-model="form.demandDescribe"
                            :placeholder="'请输入需求描述'">
                            </a-textarea>
                        </a-form-model-item>
                    </a-descriptions-item>
                </a-descriptions>
            </a-card>

            <a-card title="云资源需求">
                <a-descriptions bordered :column="2">
                    <a-descriptions-item label="云资源项目名称" :span="2">
                        <a-form-model-item
                                prop="cloudProjectName"
                                :rules="{
                                required: true,
                                message: '请输入云资源项目名称',
                                trigger: 'change',
                            }">
                            <a-input 
                            v-model="form.cloudProjectName" 
                            :placeholder="'请输入云资源项目名称'">
                            </a-input>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="云资源数量" >
                        <a-form-model-item
                                prop="cloudResourceNumber"
                                :rules="{
                                required: true,
                                message: '请输入云资源数量',
                                trigger: 'change',
                            }">
                            <a-input-number
                            v-model="form.cloudResourceNumber" 
                            :placeholder="'请输入云资源数量'">
                            </a-input-number>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="云资源使用场景" >
                        <a-form-model-item
                                prop="cloudUseScene"
                                :rules="{
                                required: true,
                                message: '请输入云资源使用场景',
                                trigger: 'change',
                            }">
                            
                            <a-select 
                                v-model="form.cloudUseScene"
                                :placeholder="'请输入云资源使用场景'">
                                <a-select-option :value="item.codeMasterValue" :key="index" v-for="(item,index) in $store.getters.dictionary['SERVICE_DOMAIN_DEMAND_USE_SCENE']">
                                    {{item.codeMasterName}}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="CPU 要求" >
                        <a-form-model-item
                                prop="cpuDemand"
                                :rules="{
                                required:true,
                                message: '请选择CPU 要求',
                                trigger: 'change',
                            }">
                            <a-radio-group v-model="form.cpuDemand" >
                                <a-radio value="1">
                                    i3
                                </a-radio>
                                <a-radio value="2">
                                    i5
                                </a-radio>
                                <a-radio value="3">
                                    i7
                                </a-radio>
                                <a-radio value="4">
                                    其他
                                </a-radio>
                            </a-radio-group>
                            <a-input 
                                    v-show="form.cpuDemand==4" 
                                    :placeholder="'请输入其他CPU 要求'"
                                    v-model="form.cpuDemandText"></a-input>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="内存要求" >
                        <a-form-model-item
                                prop="memoryDemand"
                                :rules="{
                                required: true,
                                message: '请选择内存要求',
                                trigger: 'change',
                            }">
                            <a-radio-group v-model="form.memoryDemand">
                                <a-radio value="1">
                                    3G
                                </a-radio>
                                <a-radio value="2">
                                    5G
                                </a-radio>
                                <a-radio  value="3">
                                    7G
                                </a-radio>
                                <a-radio  value="4">
                                    其他
                                </a-radio>
                            </a-radio-group>
                            <a-input 
                                    v-show="form.memoryDemand==4" 
                                    :placeholder="'请输入其他内存要求'"
                                    v-model="form.memoryDemandText"></a-input>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="硬盘要求" >
                        <a-form-model-item
                                prop="hardDiskDemand"
                                :rules="{
                                required: true,
                                message: '请选择硬盘要求',
                                trigger: 'change',
                            }">
                            <a-radio-group v-model="form.hardDiskDemand">
                                <a-radio value="1">
                                    3T
                                </a-radio>
                                <a-radio value="2">
                                    5T
                                </a-radio>
                                <a-radio value="3">
                                    7T
                                </a-radio>
                                <a-radio value="4">
                                    其他
                                    
                                </a-radio>
                            </a-radio-group>
                            <a-input 
                                    v-show="form.hardDiskDemand==4"
                                    :placeholder="'请输入其他硬盘要求'"
                                    v-model="form.hardDiskDemandText"
                                    ></a-input>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="带宽要求" >
                        <a-form-model-item
                                prop="bandwidthDemand"
                                :rules="{
                                required: true,
                                message: '请选择带宽要求',
                                trigger: 'change',
                            }">
                            <a-radio-group v-model="form.bandwidthDemand">
                                <a-radio value="1">
                                    3M
                                </a-radio>
                                <a-radio value="2">
                                    5M
                                </a-radio>
                                <a-radio value="3">
                                    7M
                                </a-radio>
                                <a-radio value="4">
                                    其他
                                    
                                </a-radio>
                            </a-radio-group>
                            <a-input 
                                    v-show="form.bandwidthDemand==4"
                                    :placeholder="'请输入其他带宽要求'"
                                    v-model="form.bandwidthDemandText"></a-input>
                        </a-form-model-item>
                    </a-descriptions-item>

                    <a-descriptions-item label="云资源项目介绍" >
                        <a-form-model-item
                                prop="cloudProjectIntroduce"
                                :rules="{
                                required: true,
                                message: '请输入云资源项目介绍',
                                trigger: 'change',
                            }">
                            <a-textarea 
                            v-model="form.cloudProjectIntroduce"
                            :placeholder="'请输入云资源项目介绍'">
                               
                            </a-textarea>
                        </a-form-model-item>
                    </a-descriptions-item>
                </a-descriptions>
            </a-card>
        </a-form-model>
    </a-modal>
</template>

<script>
    import {demandBaseAddYzy} from '@/assets/api/new'
   
    export default {
        name: "xlForm",
        data() {
            return {
                cpu:'',
                tableTitle: '',
                visible: false,
                confirmLoading: false,
                form: {
                    proposerName:''
                },
                formFile: {},
                rules: {},
            }
        },
        created(){
            
        },
        components: {

        },
        methods: {
            // 清空提出人对应企业
            onChange(){
                if(this.form.proposerType = 'SD111111'){
                    this.form.companyName = ''
                }
            },
            handleOk() {
                this.$refs.form.validate(valid => {
                    console.log(this.cpu)
                    if (valid) {
                        demandBaseAddYzy({
                            param: this.form
                        })
                            .then(result=>{
                                this.visible = false
                                this.confirmLoading = false
                                this.$parent.pageOnload()
                            }).catch(_=>{
                                this.confirmLoading = false
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCancel() {
                this.visible = false
            },
            formatData() {

            },
            formatForm(form) {
                console.log(form)
                delete form.createDateTime
                delete form.modifyDateTime
                delete form.modifyBy
                delete form.createBy
                //整理字段数据 ／ 赋值 清空等
                this.form = Object.assign({},form)
                this.form.proposerName = this.$store.getters.userInfo.loginUserName

            }
        }
    }
</script>

<style scoped lang="less">
    /deep/ .ant-form-item {
        margin: 0;
    }

    /deep/ .ant-input-number {
        width: 100%;
    }

    .xl-dateRange {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ant-checkbox-group {
        display: flex;
        flex-wrap: wrap;

        .xl-checkbox {
            display: flex;
            align-items: center;

            /deep/ span:nth-child(2):not(.ant-checkbox-inner) {
                display: flex;
                justify-content: space-between;
                white-space: pre;
            }
        }
    }

    .ant-card {
        margin-bottom: 10px;

        .ant-select {
            min-width: 300px;
        }
    }

    .descriptions {
        /deep/ .ant-descriptions-item-content {
            width: 50%;
        }
    }
</style>
